<template>
  <div class="footer-content flex align_center justify_between">
    <div class="left-footer flex align_center">
      <el-popover
        placement="top"
        :width="280"
        popper-class="key-board-popover"
        trigger="click"
      >
        <template #reference>
          <div class="footer-keyboard cursor_point">
            <span class="iconfont icon-jianpan"></span>
          </div>
        </template>
        <div class="shortcut-wp">
          <div class="shortcut-item">
            <div class="shortcut-title">开关图层面板</div>
            <div class="shortcut-value">Ctrl/Cmd + ←</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-title">切换组件面板</div>
            <div class="shortcut-value">Ctrl/Cmd + ↑</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-title">切换右侧面板</div>
            <div class="shortcut-value">Ctrl/Cmd + →</div>
          </div>
          <div class="shortcut-item">
            <div class="shortcut-title">画布缩放到最佳位置</div>
            <div class="shortcut-value">Ctrl/Cmd + a</div>
          </div>
        </div>
      </el-popover>
      <div class="scale-input-wp">
        <input
          v-model="inputScale"
          type="number"
          min="10"
          class="scale-input"
          @keydown.enter="submitInputScale()"
          @blur="submitInputScale()"
          @change="submitInputScale()"
        />
        <span class="percent">%</span>
        <el-popover
          :width="150"
          popper-class="footer-scale-popover"
          placement="top"
          effect="dark"
          v-model:visible="scaleListVisible"
        >
          <template #reference>
           <div @click="handleScaleListOpen">
             <el-icon class="open-icon" :size="14">
              <arrow-down />
            </el-icon>
           </div>
          </template>
          <div class="scale-value-list">
            <div
              v-for="s in scaleList"
              :key="s.value"
              class="scale-value-item"
              @click="submitSelectScale(s.value)"
            >
              {{ s.label }}
            </div>
          </div>
        </el-popover>
      </div>
      <div class="scale-slider-wp">
        <el-slider
          v-model="sliderScale"
          size="small"
          :min="10"
          :max="200"
          :step="5"
          :format-tooltip="formatTooltip"
          @change="submitSliderScale"
        />
      </div>
    </div>
    <div class="right-footer px_4">
      <div class="footer-keyboard cursor_point">
        <span class="iconfont icon-daxiao"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { designScaleList } from '../../../../../utils/dict'
import { useDesignStore } from './../../../../../store/design'
import { emitter } from '../../../../../utils/emitter'
export default defineComponent({
  name: 'footer-toolbar',
  components: { ArrowDown },
  setup() {
    const designStore = useDesignStore()
    const pageScale = computed(() => designStore.pageConfig.scale)
    const inputScale = ref(20)
    const sliderScale = ref(20)
    const scaleListVisible = ref(false)
    watch(
      () => pageScale.value,
      (s) => {
        const newV = parseInt((s * 100).toFixed(2))
        inputScale.value = newV
        sliderScale.value = newV
      },
      { immediate: true, deep: true }
    )
    const scaleList = ref([])
    const submitInputScale = () => {
      designStore.setScale(inputScale.value / 100)
      designStore.getEditor();
    }
    const submitSelectScale = (value) => {
      if (value === 'auto') {
        const screens = document.getElementById('screens')
        const screensHeight = screens ? screens.offsetHeight : 0
        const screensWidth = screens ? screens.offsetWidth : 0
        const a = (screensWidth - 70) / designStore.pageConfig.width
        const b = (screensHeight - 70) / designStore.pageConfig.height
        let scale = parseFloat((a > b ? b : a).toFixed(6))
        designStore.setScale(scale)
      } else {
        designStore.setScale(value / 100)
      }
      scaleListVisible.value = false
      designStore.getEditor();
      emitter.emit('screenSroll')
    }
    const submitSliderScale = () => {
      designStore.setScale(sliderScale.value / 100)
      designStore.getEditor();
      emitter.emit('screenSroll')
    }
    const formatTooltip = (val) => {
      return `${val}%`
    }
    const handleScaleListOpen = () => {
      scaleListVisible.value = !scaleListVisible.value
    }
    onMounted(() => {
      scaleList.value = designScaleList
    })
    return {
      pageScale,
      inputScale,
      sliderScale,
      scaleList,
      scaleListVisible,
      submitInputScale,
      submitSelectScale,
      submitSliderScale,
      formatTooltip,
      handleScaleListOpen,
    }
  },
})
</script>

<style lang="less" scoped>
.footer-content {
  overflow: hidden;

  .footer-keyboard {
    margin: 0 8px;
    padding: 1px 7px 2px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;

    &:hover,
    &:active {
      background-color: #263238;
      color: #1f8fe7;
      box-shadow: 0 0 0 2px rgb(33 150 243 / 20%);
    }
  }
}

.left-footer {
  .scale-input-wp {
    position: relative;
    width: 62px;
    height: 24px;
    line-height: 18px;
    margin-right: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #262c33;
    border: 1px solid #0b0c0d;
    display: flex;
    align-items: center;
    justify-items: center;

    .scale-input {
      width: 27px;
      padding-left: 5px;
      font-size: 12px;
      color: #bcc9d4;
      text-align: right;
      background: transparent;
      caret-color: #bcc9d4;
      border: none;
    }

    .percent {
      font-size: 12px;
      color: #bcc9d4;
      background: transparent;
      height: 14px;
      line-height: 1;
      display: inline-block;
    }

    .open-icon {
      margin-left: 4px;
      height: 16px;
      line-height: 1;
      display: inline-block;
    }
  }

  .scale-slider-wp {
    width: 180px;
  }
}
</style>
<style lang="less">
.shortcut-wp {
  position: relative;
  font-size: 12px;
  user-select: none;

  .shortcut-item {
    display: flex;
    margin: 5px 0;
    justify-content: space-between;
    align-items: center;
  }

  .shortcut-title {
    padding-right: 15px;
  }

  .shortcut-value {
    padding: 4px 6px;
    font-weight: 700;
    color: #08a1db;
    background: #262b33;
    border-radius: 2px;
  }
}

.dark-theme .footer-scale-popover {
  padding: 0;
  width: 56px;
  border: 1px solid #171b22;
}

.scale-value-list {
  font-size: 12px;
  background: #262b33;
  user-select: none;
  border-radius: 2px;

  .scale-value-item {
    padding: 8px 4px;
    color: #bcc9d4;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;

    & > .iconfont {
      font-size: 12px;
    }

    &:hover {
      background-color: #0b0c0d;
      color: #409fff;
    }
  }
}
</style>
